﻿<script type="text/javascript">
    if (!('webkitSpeechRecognition' in window)) {
        upgrade();
    } else {
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
        //	document.getElementById("text").value = "hello world.";

        recognition.onstart = function () {
            recognizing = true;
            document.getElementById("label").innerHTML = "Start";
        };

        recognition.onerror = function (event) {
            if (event.error == 'no-speech') {
                document.getElementById("label").innerHTML = "no-speech";
                return;
            }
            if (event.error == 'audio-capture') {
                document.getElementById("label").innerHTML = "audio-capture";
                return;
            }
            document.getElementById("label").innerHTML = "error";
        };

        recognition.onend = function () {
            document.getElementById("label").innerHTML = "End";
            recognizing = false;
        };

        recognition.onresult = function (event) {
            var interim_transcript = '';
            var final_transcript = '';
            if (typeof (event.results) == 'undefined') {
                recognition.onend = null;
                recognition.stop();
                upgrade();
                return;
            }
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    final_transcript += event.results[i][0].transcript;
                } else {
                    interim_transcript += event.results[i][0].transcript;
                }
            }
            document.getElementById("text").innerHTML = final_transcript;
            var xmlhttp;
            
            xmlhttp = null;
            if (window.XMLHttpRequest) {// code for all new browsers
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {// code for IE5 and IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp != null) {
                xmlhttp.onreadystatechange = state_Change;
                xmlhttp.open("GET", "http://localhost:9746/Question/Game2/?roomid=" + 
                                document.getElementById("roomid").innerHTML+"&answer=" + final_transcript, true);
                xmlhttp.send();
            }
            else {
                alert("Your browser does not support XMLHTTP.");
            }


            function state_Change() {
                if (xmlhttp.readyState == 4) {// 4 = "loaded"
                    if (xmlhttp.status == 200) {// 200 = OK
                        // ...our code here...
                        document.getElementById("question").innerHTML = xmlhttp.responseText;
                        for (var ii = 0; i < 200000000; i++);
                        document.getElementById("text").innerHTML = "";
                    }
                    
                }
            }
            /*			final_transcript = capitalize(final_transcript);
                        final_span.innerHTML = linebreak(final_transcript);
                        interim_span.innerHTML = linebreak(interim_transcript);
                        */
        };
        recognition.lang = "cmn-Hans-CN";
        recognition.start();
    }

    function upgrade() {
        alert("update you brower!!!!!!!!");
    }
</script>
@model IEnumerable<YZDD.Models.Question>

@{
    ViewBag.Title = "Game";
}

<h2>Game</h2>
<p align="left">Room </p>
<p align="left" id="roomid">@ViewBag.roomid</p>
<table width="100%" border="0">
  <tr>
    <th scope="col"><table width="100%" border="0">
      <tr>
        <th width="25%" scope="col"><p>currentUser</p>
          <p id="curuser">@ViewBag.curuser</p></th>
          <p>time:</p>
          <p id="time">20</p>
        <th width="25%" scope="col"><p>user1</p>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col"><p>user2</p>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col"><p>time</p>
          <p>&nbsp;</p></th>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td><table width="100%" border="0">
      <tr>
        <th width="25%" scope="col"><p>user8</p>
          <p>&nbsp;</p></th>
        <th width="50%" scope="col">
            <table>
                @foreach (var item in Model) {
                <tr>
                    <td id ="question">
                        @Html.DisplayFor(modelItem => item.Quesiton)
                    </td>
                </tr>
                }

            </table>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col"><p>user3</p>
          <p>&nbsp;</p></th>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0">
      <tr>
        <th width="25%" scope="col"><p>user7</p>
          <p>&nbsp;</p></th>
        <th width="50%" scope="col">
            <p id="label"></p>
            <p id ="text"></p>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col"><p>user4</p>
          <p>&nbsp;</p></th>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0">
      <tr>
        <th width="25%" scope="col">&nbsp;</th>
        <th width="25%" scope="col"><p>user6</p>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col"><p>user5</p>
          <p>&nbsp;</p></th>
        <th width="25%" scope="col">&nbsp;</th>
      </tr>
    </table></td>
  </tr>
</table>
